<template>
    <div class="white_list">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{$t('pageTitle.whiteList')}}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row :gutter="10">
                    <el-col :span="8">
                        <el-form-item prop="uploadDate"><!--模板名称-->
                            <el-date-picker
                                style="width:100%"
                                v-model="form.uploadDate"
                                type="daterange"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd"
                                :editable="false"
                                range-separator="-"
                                :start-placeholder="$t('common.startTime')"
                                :end-placeholder="$t('common.endTime')"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="appName" label="">
                            <select-app-list v-model="form.appName" @giveParentData="getAppList" :placeholder="$t('system.appName')"></select-app-list><!--app名称-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-button @click="search" type="primary">{{ $t('common.search') }}</el-button>
                        <el-button @click="showUpload" type="primary">{{ $t('common.upload') }}</el-button><!--上传-->
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table :data="tableData" :max-height="tableMaxHeight" style="width: 100%">
                        <el-table-column prop="tag" :label="$t('common.numbering')" min-width="120"></el-table-column><!--编号-->
                        <el-table-column prop="appName" :label="$t('system.appName')" min-width="130"></el-table-column><!--APP名称-->
                        <el-table-column :label="$t('common.uploadTime')" min-width="180"><!--上传时间-->
                            <template slot-scope="{ row }">{{ row.importingTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.expireTime')" min-width="180"><!--到期时间-->
                            <template slot-scope="{ row }">{{ row.expireDate | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column>
                        <el-table-column prop="succeedNum" :label="$t('common.successAmount')" min-width="120"></el-table-column><!--成功数-->
                        <el-table-column prop="failedNum" :label="$t('common.failAmount')" min-width="120"></el-table-column><!--失败数-->
                        <el-table-column :label="$t('common.operation')" min-width="120"><!--操作-->
                            <template slot-scope="{row}">
                                <el-button @click="download(row)" type="text">{{ $t('common.download') }}</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!--分页组件-->
                <pagination @pageChange="pageChange" :page="page"><!--分页组件--></pagination>
            </div>
        </div>

        <!--上传白名单弹框-->
        <upload-finance-file
            :visible.sync="showUploadDialog"
            :template-url="templateUrl"
            :confirm-button-text="$t('common.upload')"
            @submitUpload="submitUpload"
            body-cls="upload_body"
            label-width="100px"
            :label-name="$t('common.import')"
            label-position="left"
            :disable-submit="disabledUpload"
            :title="$t('common.upload')">
            <el-form slot="bodyTop" label-width="100px" label-position="left">
                <!--APP名称-->
                <el-form-item :label="$t('system.appName')">
                    <select-app-list multiple v-model="uploadForm.appName" @giveParentData="getUploadAppList" :placeholder="$t('system.appName')"></select-app-list><!--app名称-->
                </el-form-item>
                <!--到期日-->
                <el-form-item :label="$t('common.expiryDate')">
                    <el-date-picker
                        v-model="uploadForm.endDate"
                        type="date"
                        style="width: 100%"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        :editable="false"
                        :picker-options="dataPickerOpt"
                        :placeholder="$t('common.expiryDate')">
                    </el-date-picker>
                </el-form-item>
            </el-form>
        </upload-finance-file>

    </div>
</template>

<script src="./main.js"></script>

<style scoped>

</style>
